<template>
    <div style="display:flex;">
      <!-- <div class="left"> -->
        <el-menu :router="true" class="el-menu-vertical-demo" style="width: 15%;">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">乾坤架构</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/containerVue">vue2模块</el-menu-item>
              <el-menu-item index="/containerReact">react模块</el-menu-item>
              <el-menu-item index="/containerVue3">vue3模块</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      <!-- </div> -->
      <!-- <div class="right"> -->
        <router-view v-show="$route.name"></router-view>
        <div  id="yourContainer1"></div>  <!-- 重点2：子应用容器 id -->
        <div  id="yourContainer2"></div>
        <div  id="yourContainer3"></div>
      </div>
    <!-- </div> -->
</template>
<script>
    export default {
        name: "App"
    };
</script>
   
<style  scoped>
.app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
